<template>
	<view class="bgimg1 status-bar-height bgF8F8F8 found-page flex-1 flex flex-column">
		<view class="flex align-center ftrgba1 fs-34 px-4 h-88">
			<text @tap="changeTab(0)" :class="activeIndex === 0?'text-white font-weight-light':''">{{$t('hhh.t8')}}</text>
			<text @tap="changeTab(1)" class="ml-8"
				:class="activeIndex === 1?'text-white font-weight-light':''">{{$t('hhh.t9')}}</text>
		</view>
		<view class="rounded-top-max-lg bgF8F8F8 px-3 py-4 overflow-y message-list box-sizing">
			<view v-for="(item,index) in dataList" :key="index" class="mb-4"
				@tap="navTo(`/pages/found/details?id=${item.id}&title=${activeIndex}`)">
				<view class="ft999999 fs-24 text-center mb-2">{{item.create_time}}</view>
				<view class="flex flex-column bg-white rounded-lg">
					<!-- <image v-if="activeIndex === 1" src="/static/imgs/banner.jpg" mode="aspectFill" class="w-100 rounded-lg" style="height: 292rpx;">
					</image> -->
					<view class="ft333333 fs-32 font-weight-bold m-2 position-relative">
						<view>{{item.title}}</view>
						<text class="read position-absolute top-0 right-0 bgFF0000" v-if="item.read_status === 0"></text>
					</view>
					<view class="ft333333 fs-28 mx-2 mb-2 content" v-html="item.content"></view>
					<view class="flex align-center justify-between border-top mx-2 py-2" v-if="activeIndex === 1">
						<text class="ft300D45 fs-28">{{$t('hhh.t10')}}</text>
						<image class="w-28 h-28" src="/static/imgs/right_icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<nodata v-if="dataList.length === 0"></nodata>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				activeIndex: 0,
				page: 1,
				dataList: [],
				tempList: [],
			}
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.getList()
		},
		methods: {
			getList() {
				if (this.activeIndex === 1) {
					this.noticePlatformList()
				} else {
					this.messageList()
				}
			},
			changeTab(index) {
				this.page = 1
				this.activeIndex = index
				this.dataList = []
				uni.$tools.showLoading()
				this.getList()
			},
			messageList() {
				HttpApi.messageList({
					page: this.page,
					limit: 20
				}).then(res => {
					if (res.code === 1) {
						const list = res.data.data || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			noticePlatformList() {
				HttpApi.noticePlatformList({
					page: this.page,
					limit: 20
				}).then(res => {
					if (res.code === 1) {
						const list = res.data.data || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.found-page {
		.message-list {
			height: calc(100dvh - 105px);

			.read {
				width: 6px;
				height: 6px;
				border-radius: 50%;
			}
		}
	}
</style>